<template>
  <div class="table-condition">
    <div style="float: left">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="addTableList">新建任务</el-button>

      <template v-if="isSubMine && commandViews === '列表视图'">
        <el-button icon="el-icon-circle-close" v-if="showCloseBtn" size="small" @click="delTask">删除</el-button>
        <el-button icon="el-icon-refresh-right" v-if="showRestoreBtn" size="small" @click="recoveryTask">恢复</el-button>
        <el-button icon="el-icon-close" v-if="showDeleteBtn" size="small" @click="trueDelTask">永久删除</el-button>
        <el-button icon="el-icon-bell" v-show="state != 3" v-if="showUrgingBtn" size="small" @click="urgingTask">催办</el-button>
        <el-button icon="el-icon-document-copy" size="small" v-if="showCopyBtn" @click="copyTask">复制</el-button>
        <!-- <el-button v-bind:icon="iconData" size="small" @click="changeCheckAll">全选</el-button> -->
        <!-- <el-button icon="el-icon-close" size="small" v-if="showCopyBtn" @click="copyTask">取消全选</el-button> -->
      </template>
      <!-- <el-dropdown style="margin:0 10px">
                <el-button icon="el-icon-download" size="small">
                    导入导出
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>导入</el-dropdown-item>
                    <el-dropdown-item>导出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown> -->

      <!-- <el-button icon="el-icon-document-checked" size="small">计划审批</el-button> -->
      <!--            <el-dropdown style="margin:0 10px" @command="handleExpandAll">-->
      <!--                <el-button icon="el-icon-plus" size="small">-->
      <!--                    展开<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
      <!--                </el-button>-->
      <!--                <el-dropdown-menu slot="dropdown">-->
      <!--                    <el-dropdown-item command="expandAll">全部展开</el-dropdown-item>-->
      <!--                    <el-dropdown-item command="collapseAll">全部收起</el-dropdown-item>-->
      <!--                </el-dropdown-menu>-->
      <!--            </el-dropdown>-->
      <el-button icon="el-icon-refresh-left" size="small" @click="reloadList">刷新列表</el-button>
      <!-- <el-checkbox style="margin:0 0 0 10px" size="small" border v-model="showComplete" :disabled="state == 3" @change="setShowComplete">显示已完成</el-checkbox> -->
      <el-checkbox style="margin:0 0 0 10px" 
        size="small" border 
        v-model="showComplete" 
        v-show="state == 0" 
        v-if="showCompleteBtn"
        @change="setShowComplete"
      >显示已完成</el-checkbox>

      <el-checkbox style="display:none" size="small" border v-model="showCycle" @change="setShowCycle">显示周期任务</el-checkbox>
    </div>
    <div style="float: right">
      <search
        :keyList="keyList"
        @searchent="searchTableList"
        @changeKeyCode="changeKeyCode($event, 'keyList1')"
      ></search>
      <search
        :keyList="keyList1"
        @searchent="searchTableList"
        @changeKeyCode="changeKeyCode($event, 'keyList')"
      ></search>

      <el-button icon="el-icon-search" @click="searchTableList" size="small"
        >搜索</el-button
      >
      <el-button size="small" @click="handleChangeViews">
        {{ commandViews }}
      </el-button>
      <!--            <el-dropdown style="margin:0 10px" @command="handleChangeViews">-->

      <!--                <el-button icon="el-icon-plus" size="small">-->
      <!--                    {{commandViews}}-->
      <!--                    <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
      <!--                </el-button>-->

      <!--                <el-dropdown-menu slot="dropdown">-->
      <!--                    <el-dropdown-item command="list">列表视图</el-dropdown-item>-->
      <!--                    <el-dropdown-item command="gantt">甘特图</el-dropdown-item>-->
      <!--                </el-dropdown-menu>-->
      <!--            </el-dropdown>-->

      <el-dropdown
        style="margin:0 10px"
        @command="handleChangeGanttViews"
        v-show="commandViews === '甘特图'"
      >
        <el-button icon="el-icon-copy-document" size="small">
          {{ scaleUnitLabel }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, key) in scaleUnit"
            :key="key"
            :command="key"
            >{{ item.label }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import Bus from "./../bus";
import Search from "./search.vue";
import tv from "./table.vue";
export default {
  name: "condition",
  components: {
    Search,
    tv,
  },
  props: {
    state: {
      type: [Number, String],
      default: 1,
    },
    showCloseBtn: {
      type: Boolean,
      default: false
    },
    showRestoreBtn: {
      type: Boolean,
      default: false
    },
    showUrgingBtn: {
      type: Boolean,
      default: false
    },
    isSubMine: {
      type: Boolean,
      default: false
    },
    showDeleteBtn: {
      type: Boolean,
      default: false
    },
    showCompleteBtn: {
      type: Boolean,
      default: false
    },
    showCopyBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      iconData: "el-icon-check",
      showCycle: this.isSubMine,
      showComplete: false,
      commandViews: "列表视图", //localStorage.ganttShow === 'true' ? '甘特图' :
      scaleUnit: {
        day: { label: "日视图", value: "day", active: false },
        week: { label: "周视图", value: "week", active: true },
        month: { label: "月视图", value: "month", active: false },
      },
      scaleUnitLabel: "日视图",
      //搜索框1的select下拉
      keyList: [
        { label: "任务名称", value: "title", show: true },
        { label: "任务层级", value: "taskLevel", show: false },
        { label: "任务类型", value: "taskType", show: true },
        { label: "发起人", value: "publisher", show: true },
        { label: "责任人", value: "manager", show: true },
        { label: "责任部门", value: "managerDepartment", show: true },
        { label: "开始时间", value: "startDate", show: true },
        { label: "结束时间", value: "endTime", show: true },
        { label: "任务状态", value: "taskState", show: true },
        { label: "任务审批状态", value: "approveState", show: true },
        { label: "紧急程度", value: "importantLevel", show: true },
        { label: "任务编码", value: "taskNum", show: true },
      ],
      //搜索框2的select下拉
      keyList1: [
        { label: "任务名称", value: "title", show: false },
        { label: "任务层级", value: "taskLevel", show: true },
        { label: "任务类型", value: "taskType", show: true },
        { label: "发起人", value: "publisher", show: true },
        { label: "责任人", value: "manager", show: true },
        { label: "责任部门", value: "managerDepartment", show: true },
        { label: "开始时间", value: "startDate", show: true },
        { label: "结束时间", value: "endTime", show: true },
        { label: "任务状态", value: "taskState", show: true },
        { label: "任务审批状态", value: "approveState", show: true },
        { label: "紧急程度", value: "importantLevel", show: true },
        { label: "任务编码", value: "taskNum", show: true },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      //this.ganttShow = true;
    });
  },
  methods: {
    setShowCycle(val) {
      Bus.$emit("setShowCycle", val);
    },
    setShowComplete(val) {
      Bus.$emit("setShowComplete", val);
    },
    //设置查询param
    searchTableList() {
      Bus.$emit("reloadTableList");
    },
    changeKeyCode(code, arrName) {
      this[arrName].forEach((item) => {
        item["show"] = item.value !== code;
      });
    },
    handleExpandAll(command) {
      Bus.$emit(command);
    },
    // handleChangeViews(command) {
    //     this.commandViews = command === 'gantt' ? '甘特图' : '列表视图';
    //     Bus.$emit('changeViews', command === 'gantt');
    // },
    handleChangeViews() {
      if (this.commandViews == "甘特图") {
        this.commandViews = "列表视图";
        Bus.$emit("changeViews", false);
      } else {
        this.commandViews = "甘特图";
        Bus.$emit("changeViews", true);
      }
    },

    handleChangeGanttViews(command) {
      const selectUnit = this.scaleUnit[command];
      this.scaleUnitLabel = selectUnit.label;
      Bus.$emit("ganttChangeView", selectUnit);
    },

    reloadList() {
      Bus.$emit("getTableList");
    },
    addTableList() {
      top.window.localStorage.removeItem('taskData')
      Bus.$emit("addTableList");
    },
    delTask() {
      Bus.$emit("delTask");
    },
    trueDelTask() {
      Bus.$emit("trueDelTask");
    },
    recoveryTask() {
      Bus.$emit("recoveryTask");
    },
    urgingTask() {
      Bus.$emit("urgingTask");
    },
    copyTask() {
      Bus.$emit("copyTask");
    },
    changeCheckAll() {
      // Bus.$emit("checkAllTask");
      // if (this.iconData === "el-icon-check") {
      //   this.iconData = "el-icon-close";
      // } else {
      //   this.iconData = "el-icon-check";
      // }
    },
  },
  watch: {
    state: function(val) {
      this.showComplete = val == 3;
      // this.showCycle = (val == 5);
      this.showCycle = true;
      this.setShowCycle(true);
      //Bus.$emit('setShowComplete', this.showComplete);
    },
  },
};
</script>
<style lang="scss" scoped>
.table-condition {
  padding: 10px;
  box-sizing: border-box;
  height: 54px;
  background-color: white;
  border-color: #e4e7ed;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  margin-top: 10px;
}
.search-input,
.search-input /deep/ input {
  border-radius: 0px;
  vertical-align: middle;
}
.search-input-left /deep/ input {
  border-radius: 4px 0px 0px 4px;
  border-right: none;
}
.search-input-right {
  border-radius: 0px 4px 4px 0;
  border-left: none;
}
</style>
